<template>
    <div class="dorm-box">
        <router-view></router-view>
        <!-- 左边已有宿舍显示 -->
        <div class="overview left-style">
            <div v-for="(item, index) in buildNoList" class="buildNo-box">
                <p>{{item.buildNo}}号楼<span v-if="item.sex=='1' ">男</span><span v-else>女</span>宿</p>
                <p>共有{{item.totalDorm}}个宿舍</p>
                <p>已住:
                    <span v-for="full in fullDormNum">
                        <span v-if="full.buildNo == item.buildNo">{{full.DormStatusNum}}</span>
                    </span>
                </p>
                <p>空宿舍:
                    <span v-for="empty in emptyDormNum">
                        <span v-if="empty.buildNo == item.buildNo">{{empty.DormStatusNum}}</span>
                    </span>
                </p>
                <p>未住满:
                    <span v-for="notfull in notFullDormNum">
                        <span v-if="notfull.buildNo == item.buildNo">{{notfull.DormStatusNum}}</span>
                    </span>
                </p>
                <p class="dormDetail" @click="gotodetail(index)">点击查看详情</p>
            </div>
        
        <el-button type="primary" class="addButton" @click="addDorm()">新增宿舍</el-button>
        <el-dialog
            title="添加寝室信息"
            :visible.sync="dormNoVisible"
            width="30%">
            <el-upload
                class="upload-demo"
                drag
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple
                width="100%">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传excl文件，且不超过500kb</div>
            </el-upload>
        <el-button><a href="https://kdocs.cn/l/canNRWXicDpy">下载模板</a></el-button>
        <span></span> 
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dormNoVisible = false">取 消</el-button>
            <el-button type="primary" @click="commit()">确认新增</el-button>
        </span>
        </el-dialog>
        <!-- 右侧显示宿舍详情 -->
        <!-- <div class="details right-style">
            <p class="title" >1号楼详情</p>
        </div> -->
            <!-- 循环 -->
            <!-- <div v-for="floor in floorNum" class="floor">
                <p>{{floor}}层</p>
                <div v-for="dorm in dormDetailList" class="dorm"> 
                    <p v-if="dorm.floor == floor"> {{dorm.dormNo}}</p>
                </div>
            </div>
            <el-button type="primary" size="samll" class="addButton" @click="showAddArea">新增</el-button> -->
        
        <!-- 树形控件 -->
       <!--  <div class="details right-style">
          <p class="title">1号楼详情</p>
          <el-tree :data="treeList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </div> -->
        <!-- 右侧新增宿舍 -->
        <!-- <div class="dorm-add right-style" v-if="!detailOrAdd">
            <p>层高</p>
            <template>
                <div class="block">
                    <el-slider
                    v-model="buildHight"
                    show-input
                    max="10">
                    </el-slider>
                </div>
            </template>
        </div> -->
        </div>
    </div>
</template>
<script>
import request from "@/utils/request";
export default {
    name: 'DormManager',
    data() {
        return {
            buildNoList:[],
            floorNum:'',
            dormDetailList:[],
            fullDormNum:[],
            notFullDormNum:[],
            emptyDormNum:[],
            // detailOrAdd:true,
            buildHight:0,
            treeList:[],
            defaultProps: {
                children: 'children',
                label: 'dormNo'
            },
            dormNoVisible:false
        }
    },
    mounted() {
        // 查询是宿舍楼号
        this.getBuildNo()
        this.getDormDetail()
    },
    methods:{
         handleNodeClick(treeList) {
            console.log(treeList);
        },
        // 查询是宿舍楼号
        getBuildNo(){
            request({
                url: "/api/dormDetail/countBuild",
                method: "get",
                data: {}
            }).then(res => {
                console.log(res);
                if (res.msg === "查询成功") {
                this.buildNoList = res.list;
                this.fullDormNum = res.full;
                this.notFullDormNum = res.notfull;
                this.emptyDormNum = res.empty;
                this.getDormDetail()
                }
            });
        },
        // 查询宿舍详情
        getDormDetail(){
            request({
                url: "/api/dormDetail/dormDetail",
                method: "post",
                data: {
                    buildNo:1
                }
            }).then(res => {
                console.log(res);
                if (res.status === 200) {
                    this.dormDetailList = res.list;
                    this.floorNum =parseInt( res.floor[0].floor);
                    console.log(res);
                    // this.treeList = res.list
                }
            });
        },
        //打开新增区域
       /*  showAddArea(){
            this.detailOrAdd=false
        }, */
        //宿舍详情楼层筛选
        /* even: function (thisfloor,floor) {
            return floor.filter(function (thisfloor,floor) {
                return int(thisfloor) == floor
            })
        } */
        // 打开详情
        gotodetail(row){
            var buildNo = this.buildNoList[row].buildNo
            this.$router.push({
                path:"/dorm-manager-detail",
                query:{
                    buildNo:buildNo
                }
                })
        },
        addDorm(){
            this.dormNoVisible = true
        },
        commit(){
            request({
                url: "/api/excel/commit",
                method: "post",
                data: {}
            }).then(res => {
                
            })
            this.dormNoVisible = false,
            this.getBuildNo()
        }
    }
}
</script>
<style lang="scss" scoped>
.dorm-box{
    // background: pink;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.dorm-box .buildNo-box{
    width: 150px;
    height: 150px;
    float: left;
    margin-left: 30px;
    margin-bottom: 30px;
    background: #fff;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    p{
        padding: 1px 4px;
    }
}
.dormDetail{
    cursor: pointer;
    float: right;
}
.left-style{
    float: left;
    width: 100%;
    height: 100%;
    // background: skyblue;

}
.right-style{
    position: relative;
    float: left;
    width: 25%;
    height: 100%;
    background: rgb(209, 211, 116);
}
.right-style .addButton{
    position: absolute;
    right: 10px;
    bottom: 10px;
}
.dorm-add {
    background:pink;

}
.addButton {
position: absolute;
bottom: 10px;
right: 20px;
}
</style>